<template>
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
    >
        <el-table-column prop="title" label="文章名"> </el-table-column>
        <el-table-column prop="content" label="留言内容"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="name" label="昵称"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="delMes(scope.row.email)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<style>
/* .el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
} */
</style>

<script>
import { getMessage  } from "@/api/article";
import { delMes  } from "@/api/admin";
export default {
    async mounted() {
        this.tableData = await getMessage();
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return "warning-row";
            } else if (rowIndex === 3) {
                return "success-row";
            }
            return "";
        },
        async delMes(email){
            await delMes(email).then(
               this.$message({
                    message: '删除成功！',
                    type: 'success'
                })
            ),
            this.tableData = await getMessage()
        }
    },
    data() {
        return {
            tableData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
            ],
        };
    },
};
</script>